<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>generateLikeColor</title>
    <style>
        body,html,.color {
            height: 100%;
        }
        .color {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
        .color-item {
            width: 125px;
            height: 125px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="color" class="color"></div>
    <script>
        const generateLikeColor = (color, n = 7) => {
            let [r, g, b, a = 1] = color.replace(/rgba?|\(|\)/gi, '').split(',').map(Number);
            const res = [];
            for (let i = 0; i < n; i++) {
                r += 33;
                b += 33;
                g += 33;
                res.push(`rgba(${Math.min(r,255)},${Math.min(g,255)},${Math.min(b,255)},${a})`);
            }
            return res;
        }
        const color = document.getElementById('color');
        color.innerHTML = generateLikeColor('rgba(0,0,255,1)').reduce((res,color) => {
           res += `<div class="color-item" style="background-color:${color};"></div>`;
           return res;
        },'')
    </script>
</body>

</html>